<template>
  <view class="error-container">
    <!-- 错误图标 -->
    <view class="error-icon">
      <uni-icons 
        type="error"
        color="#ff4d4f"
        size="64"
      ></uni-icons>
    </view>
    
    <!-- 错误标题 -->
    <view class="error-title">
      支付遇到问题
    </view>
    
    <!-- 错误提示 -->
    <view class="error-tips">
      抱歉，支付过程中出现了问题，请稍后重试
    </view>
    
    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button 
        class="primary-btn"
        @click="retryPayment"
      >
        重新支付
      </button>
      <button 
        class="secondary-btn"
        @click="viewOrder"
      >
        查看订单
      </button>
      <button 
        class="secondary-btn"
        @click="contactService"
      >
        联系客服
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderNo: ''
    }
  },
  
  onLoad(options) {
    this.orderNo = options.orderNo || ''
    
    // 显示错误提示
    uni.showToast({
      title: '支付异常',
      icon: 'error'
    })
  },
  
  methods: {
    // 重新支付
    retryPayment() {
      if (this.orderNo) {
        uni.redirectTo({
          url: `/pages/order/pay/index?orderNo=${this.orderNo}`
        })
      } else {
        uni.navigateBack()
      }
    },
    
    // 查看订单
    viewOrder() {
      if (this.orderNo) {
        uni.navigateTo({
          url: `/pages/order/detail/index?orderNo=${this.orderNo}`
        })
      } else {
        uni.navigateTo({
          url: '/pages/order/list/index'
        })
      }
    },
    
    // 联系客服
    contactService() {
      // 这里可以跳转到客服页面或打开客服会话
      uni.showToast({
        title: '正在接入客服...',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss">
.error-container {
  min-height: 100vh;
  background-color: #fff;
  padding: 60rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.error-icon {
  margin-bottom: 40rpx;
}

.error-title {
  font-size: 36rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 20rpx;
}

.error-tips {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  margin-bottom: 60rpx;
}

.action-buttons {
  width: 100%;
  
  button {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
    margin-bottom: 30rpx;
    
    &.primary-btn {
      background-color: #ff5500;
      color: #fff;
    }
    
    &.secondary-btn {
      background-color: #f5f5f5;
      color: #666;
    }
  }
}
</style> 